<template>
  <div class="page">
    <div class="hei20"></div>
    <div class="customsWrapper">
      <div class="customsContainer">
        <div class="customsMain">
            <mt-cell title="所属网格">
              <span>{{detail.gridName}}</span>
            </mt-cell>
            <mt-cell title="事件名称">
              <span>{{detail.eventName}}</span>
            </mt-cell>
            <mt-cell title="发生日期">
              <span>{{happenDate}}</span>
            </mt-cell>
            <mt-cell title="发生地点">
              <span>{{detail.happenAddress}}</span>
            </mt-cell>
            <mt-cell title="事件规模">
              <span>{{detail.eventScaleName}}</span>
            </mt-cell>
            <mt-cell title="事件类别">
              <span>{{detail.eventCategoryName}}</span>
            </mt-cell>
            <mt-cell title="涉及人数">
              <span>{{detail.numberInvolved}}</span>
            </mt-cell>
            <mt-cell title="事件简述">
              <span>{{detail.eventOutline}}</span>
            </mt-cell>
            <mt-cell title="涉及单位">
              <span>{{detail.involvedUnit}}</span>
            </mt-cell>
            <mt-cell title="主要当事人证件号码">
              <span>{{detail.cardNumber}}</span>
            </mt-cell>
            <mt-cell title="主要当事人姓名">
              <span>{{detail.partyName}}</span>
            </mt-cell>
            <mt-cell title="主要当事人性别">
              <span>{{detail.genderName}}</span>
            </mt-cell>
            <mt-cell title="主要当事人民族">
              <span>{{detail.partyNationalityName}}</span>
            </mt-cell>
            <mt-cell title="主要当事人学历">
              <span>{{detail.partyEducationName}}</span>
            </mt-cell>
            <mt-cell title="主要当事人人员类别">
              <span>{{detail.partyMemberCategoryName}}</span>
            </mt-cell>
            <mt-cell title="主要当事人居住详址">
              <span>{{detail.partyDetailAddress}}</span>
            </mt-cell>
            <mt-cell title="化解时限">
              <span>{{resolveDeadline}}</span>
            </mt-cell>
            <mt-cell title="化解方式">
              <span>{{detail.resolveModeName}}</span>
            </mt-cell>
            <mt-cell title="化解组织">
              <span>{{detail.resolveOrgnization}}</span>
            </mt-cell>
            <mt-cell title="化解责任人姓名">
              <span>{{detail.resolvePersonName}}</span>
            </mt-cell>
            <mt-cell title="化解责任人联系方式">
              <span>{{detail.resolvePersonTel}}</span>
            </mt-cell>
            <mt-cell title="化解是否成功">
              <span>{{isResolved}}</span>
            </mt-cell>
            <mt-cell title="化解情况">
              <span>{{detail.resolveSituation}}</span>
            </mt-cell>
            <mt-cell title="考评日期">
              <span>{{evaluationDate}}</span>
            </mt-cell>
            <mt-cell title="考评意见">
              <span>{{detail.evaluationOpinion}}</span>
            </mt-cell>
            <mt-cell title="图片">
              <span v-if='detail.photos'>
                <img class="upSrc" :src="detail.photos" />
              </span>
              <span v-else style="color:rgb(17, 193, 243)">
                暂无图片
              </span>
            </mt-cell>
            <div class="hei20"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Lib from '@/assets/js/Lib'
import { Cell } from 'mint-ui'
Vue.component(Cell.name, Cell)
import { getContrad, findGridTree, allDict } from '@/assets/js/ApiUtil'
import { getLabelById, setTimes } from '@/assets/js/Utils'
export default {
  name: 'customsDetail',
  data () {
    return {
      title: '矛盾调解详情',
      detail: {},
      selectData: {}
    }
  },
  components: {
    Cell
  },
  mounted () {
    let id = this.getQueryVariable('id')
    this.getContradData(id)
  },
  methods: {
    getQueryVariable (variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length ; i++) {
          var pair = vars[i].split("=");
          if(pair[0] === variable){
            return pair[1]
          }
      }
    },
    getContradData (id) {
      getContrad(id).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          this.detail = data
          this.getOptions(data.gridId)
          allDict('事件规模').then(resp => {
            if (resp.code && resp.code === '200') {
              let data = resp.data
              for (let i = 0; i < data.length; i++) {
                if (this.detail['eventScale'] === data[i].code) {
                  this.$set(this.detail, 'eventScaleName', data[i].name)
                }
              }
            }
          })
          if (this.detail['eventCategory']) {
            let codeArr = this.detail['eventCategory'].split(',')
            allDict('事件类别').then(resp => {
              if (resp.code && resp.code === '200') {
                let data = resp.data
                for (let i = 0; i < data.length; i++) {
                  if (codeArr[0] === data[i].code) {
                    if (codeArr.length > 1) {
                      for (let j = 0; j < data[i].children.length; j++) {
                        if (codeArr[1] === data[i].children[j].code) {
                          this.$set(this.detail, 'eventCategoryName', data[i].name + ',' + data[i].children[j].name)
                        }
                      }
                    } else {
                      this.$set(this.detail, 'eventCategoryName', data[i].name)
                    }
                  }
                }
              }
            })
          }
          allDict('性别').then(resp => {
            if (resp.code && resp.code === '200') {
              let data = resp.data
              for (let i = 0; i < data.length; i++) {
                if (this.detail['partyGender'] === data[i].code) {
                  this.$set(this.detail, 'genderName', data[i].name)
                }
              }
            }
          })
          allDict('民族').then(resp => {
            if (resp.code && resp.code === '200') {
              let data = resp.data
              for (let i = 0; i < data.length; i++) {
                if (this.detail['partyNationality'] === data[i].code) {
                  this.$set(this.detail, 'partyNationalityName', data[i].name)
                }
              }
            }
          })
          if (this.detail['partyEducation']) {
            let educationCode = this.detail['partyEducation'].split(',')
            allDict('学历').then(resp => {
              if (resp.code && resp.code === '200') {
                let data = resp.data
                for (let i = 0; i < data.length; i++) {
                  if (educationCode[0] === data[i].code) {
                    if (educationCode > 1) {
                      for (let j = 0; j < data[i].children.length; j++) {
                        if (educationCode[1] === data[i].children[j].code) {
                          this.$set(this.detail, 'partyEducationName', data[i].name + ',' + data[i].children[j].name)
                        }
                      }
                    } else {
                      this.$set(this.detail, 'partyEducationName', data[i].name)
                    }
                  }
                }
              }
            })
          }
          if (this.detail['partyMemberCategory']) {
            let partyMemberCategoryCode = this.detail['partyMemberCategory'].split(',')
            allDict('主要当事人人员类别').then(resp => {
              if (resp.code && resp.code === '200') {
                let data = resp.data
                for (let i = 0; i < data.length; i++) {
                  if (partyMemberCategoryCode[0] === data[i].code) {
                    if (partyMemberCategoryCode > 1) {
                      for (let j = 0; j < data[i].children.length; j++) {
                        if (partyMemberCategoryCode[1] === data[i].children[j].code) {
                          this.$set(this.detail, 'partyMemberCategoryName', data[i].name + ',' + data[i].children[j].name)
                        }
                      }
                    } else {
                      this.$set(this.detail, 'partyMemberCategoryName', data[i].name)
                    }
                  }
                }
              }
            })
          }
          if (this.detail['resolveMode']) {
            let resolveModeCode = this.detail['resolveMode'].split(',')
            allDict('化解方式').then(resp => {
              if (resp.code && resp.code === '200') {
                let data = resp.data
                for (let i = 0; i < data.length; i++) {
                  if (resolveModeCode[0] === data[i].code) {
                    if (resolveModeCode > 1) {
                      for (let j = 0; j < data[i].children.length; j++) {
                        if (resolveModeCode[1] === data[i].children[j].code) {
                          this.$set(this.detail, 'resolveModeName', data[i].name + ',' + data[i].children[j].name)
                        }
                      }
                    } else {
                      this.$set(this.detail, 'resolveModeName', data[i].name)
                    }
                  }
                }
              }
            })
          }
        }
      })
    },
    getOptions (value) {
      findGridTree().then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data && data instanceof Array) {
            if (data[0].children) {
              let newData = JSON.parse(JSON.stringify(data[0].children))
              this.selectData = { data1: newData }
              this.$set(this.detail, 'gridName', getLabelById(value, this.selectData))
              return false
            }
          }
        }
      })
    },
    getName (name, param) {

    }
  },
  computed: {
    resolveDeadline () {
      if (this.detail.resolveDeadline) {
        return setTimes(this.detail.resolveDeadline)
      } else {
        return ''
      }
    },
    happenDate () {
      if (this.detail.happenDate) {
        return setTimes(this.detail.happenDate)
      } else {
        return ''
      }
    },
    isResolved () {
      if (this.detail.isResolved === '0') {
        return '否'
      } else if (this.detail.isResolved === '1') {
        return '是'
      }
    },
    evaluationDate () {
      if (this.detail.evaluationDate) {
        return setTimes(this.detail.evaluationDate)
      } else {
        return ''
      }
    }
  }
}
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  overflow: auto;
}
.customsWrapper {
  padding:0 10px
}
.customsTitle {
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: bold;
  color: #333;
  text-align: center
}
.mint-cell >>> .mint-cell-title {
  flex: 0 0 100px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 160%;
}
.mint-cell span {
  padding:  10px 0;
  line-height: 160%;
}
.upSrc {
  width: 200px;
  height: 200px;
}
</style>
